<template>
  <table-wrap :allList="allList" class="monitor-table" ref="tableWrap" :trHeight="trHeight">
    <template slot="thead">
      <th v-for="item in headOptionsNoShow" :key="item.name" :class="{ ascending: (item.name === sortObj.name)&&(sortObj.type === 'up'),descending: (item.name === sortObj.name)&&(sortObj.type === 'down') }">
        <div class="cell" @click.stop="sort(item.name)">{{item.displayname}}
          <span class="caret-wrapper">
            <i class="sort-caret ascending"></i><i class="sort-caret descending"></i>
            </span>
        </div>
      </th>
      <th v-for="item in header" :key="item.name" v-show="item.show === true" :class="{ ascending: (item.name === sortObj.name)&&(sortObj.type === 'up'),descending: (item.name === sortObj.name)&&(sortObj.type === 'down') }">
        <div class="cell" @click="sort(item.name)">{{item.displayname}}
          <span class="caret-wrapper" v-if="!(item.name === 'state'||item.name === 'autoStatus'||item.name === 'claimTime'|| item.name === 'autoOrderInitStatus')">
            <i class="sort-caret ascending"></i><i class="sort-caret descending"></i>
            </span>
        </div>
      </th>
      <!--<th><div class="cell">{{$t('monitor.operate')}}</div></th>-->
    </template>
    <template slot="tbody" slot-scope="slotProps">
      <tr-agent
        ref="trAgent"
        v-show="webchatPeers[one]"
        :one="webchatPeers[one]"
        v-for="(one, index) in slotProps.current"
        :key="one"
        :monitorHeader="header"
      ></tr-agent>
    </template>
  </table-wrap>
</template>
<script>
  import tableWrap from './tableWrapAgent'
  import trAgent from './TrAgentOrder'
  import bus from '@/store/eventBus'
  import { mapState } from 'vuex'
  // import { checkform } from '@/utils/validate'
  export default {
    name: 'tableAgentIm',
    data () {
      return {
        headOptionsNoShow: [
          {'name': 'agentName', displayname: this.$t('public.agent'), 'order': 1, 'show': true},
          {'name': 'agentNo', displayname: this.$t('public.jobNumber'), 'order': 2, 'show': true}
        ],
        sortObj: {
          name: '',
          type: '',
          num: 0
        },
        trHeight: 70
      }
    },
    props: {
      allList: {
        type: Array,
        default: function () {
          return []
        }
      },
      header: {
        type: Array,
        default: function () {
          return []
        }
      },
      cacheAgent: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {
      tableWrap,
      trAgent
    },
    computed: {
      ...mapState({
        orderMonitor: (state) => state.order.orderMonitor
      })
    },
    inject: ['webchatPeers', 'init'],
    watch: {
      header () {
        // 表头高度发生变化，重置tbody高度
        this.resize()
      },
      orderMonitor: {
        deep: true,
        handler () {
          if (this.webchatPeers[this.$store.state.order.orderMonitor.currentUserId]) {
            this.webchatPeers[this.$store.state.order.orderMonitor.currentUserId].autoOrderInitStatus = this.$store.state.order.orderMonitor.isOn
          }
        }
      }
    },
    methods: {
      sort (name) {
        if (name === 'state' || name === 'autoStatus' || name === 'claimTime') {
          return
        }
        if (this.sortObj.name !== name) {
          this.sortObj.num = 0
        }
        this.sortObj.name = name
        if (this.sortObj.num % 2) {
          this.sortObj.type = 'down'
        } else {
          this.sortObj.type = 'up'
        }
        this.sortObj.num++
        this.cacheAgent.sort((a, b) => {
          if (this.sortObj.type === 'down') {
            return this.sortMethod(this.webchatPeers[a._id], this.webchatPeers[b._id], this.sortObj.name)
          } else {
            return this.sortMethod(this.webchatPeers[b._id], this.webchatPeers[a._id], this.sortObj.name)
          }
        })
      },
      sortMethod (a, b, name, type) {
        let x = ''
        let y = ''
        if (name === 'state') {
          if (a.state.content) {
            x = a.state.content.replace(/\s+/g, '')
          }
          if (b.state.content) {
            y = b.state.content.replace(/\s+/g, '')
          }
        } else {
          x = a[name]
          y = b[name]
        }
        if (name === 'agentName') {
          return x.localeCompare(y)
        } else {
          return x - y
        }
      },
      imMonitorRefresh () {
        // 其他模块切换到通话监控，重新计算高度
        this.$refs.tableWrap && this.$refs.tableWrap.handleScroll()
        this.resize()
      },
      resize () {
        // 页面大小发上变化，重新计算高度
        this.$nextTick(() => {
          this.$refs.tableWrap && this.$refs.tableWrap.fixed()
          if (this.$refs.trAgent && this.$refs.trAgent.length) {
            this.trHeight = this.$refs.trAgent[0].$el.offsetHeight || 70
          }
        })
      }
    },
    beforeMount () {
      bus.$on('monitor:imMonitorRefresh', this.imMonitorRefresh)
      window.addEventListener('resize', this.resize)
    },
    beforeDestroy () {
      bus.$off('monitor:imMonitorRefresh', this.imMonitorRefresh)
      window.removeEventListener('resize', this.resize)
    }
  }
</script>
<style lang="stylus" scoped>
</style>
